<template>
  <div class="wrapper example14-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">14、toRaw和markRaw</h1>

    <!-- 实例区域 -->
    <div class="example14-box">
      <h1>姓名：{{ person.name }}</h1>
      <h1>年龄：{{ person.age }}</h1>
      <h1>薪水：{{ person.job.j1.salary }}K</h1>
      <h1 v-show="person.carInfo">座驾信息：{{ person.carInfo }}</h1>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">修改年龄</button>
      <button @click="person.job.j1.salary++">涨薪</button>
      <button @click="showRawPerson">输出最原始的person</button>
      <button @click="addCar">给人添加一台车</button>
      <button
        :disabled="!person.carInfo"
        @click="person.carInfo.name+='!'"
      >换车名</button>
      <button
        :disabled="!person.carInfo"
        @click="person.carInfo.price++"
      >换价格</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRaw, markRaw } from 'vue';

export default {
  name: 'Example14',
  setup() {
    // 数据
    const person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    // 方法
    const showRawPerson = () => {
      const p = toRaw(person);
      p.age++;
      console.log('响应式对象转成普通对象--', p);
    };

    const addCar = () => {
      const car = {
        name: '法拉利',
        price: 5000
      };
      person.carInfo = markRaw(car);
    };

    return {
      person,
      showRawPerson,
      addCar
    };
  }
};
</script>

<style lang="scss" scoped>
.example14-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }

  // 实例区域
  & > .example14-box {
    & > h1 {
      margin-bottom: 20px;
    }
    & > button {
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>
